import React, { PureComponent } from "react";
import "./index.module.css";

export default class Item extends PureComponent {
  state = {
    isDelShow: false,
  };

  // 鼠标移入事件
  handlerMouse = (flag) => {
    return () => {
      this.setState({
        isDelShow: flag,
      });
    };
  };

  // 修改状态的回调
  handlerCheck = (id) => {
    return (event) => {
      const { updateIsState } = this.props;
      updateIsState(id, event.target.checked);
    };
  };

  // 删除数据
  handlerDel = (id) => {
    return () => {
      if (window.confirm("确认删除吗？")) {
        this.props.deleteTodo(id);
      }
    };
  };

  render() {
    const { todoObj } = this.props;
    const { isDelShow } = this.state;
    return (
      <li
        onMouseEnter={this.handlerMouse(true)}
        onMouseLeave={this.handlerMouse(false)}
      >
        <label>
          <input
            type="checkbox"
            checked={todoObj.isState}
            onChange={this.handlerCheck(todoObj.id)}
          />
          <span>{todoObj.title}</span>
        </label>
        <button
          style={{ display: isDelShow ? "block" : "none" }}
          onClick={this.handlerDel(todoObj.id)}
        >
          删除
        </button>
      </li>
    );
  }
}
